<template>
  <avue-crud class='tabs-table' :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" @row-update="addUpdate" @row-del="rowDel" @row-save="rowSave" :before-open="beforeOpen" @selection-change="selectionChange" @refresh-change="refreshChange" @on-load="onLoad">
    <template slot-scope="{row}" slot="planDeliveryDate">
      <el-date-picker v-if="type=='edit'" v-model="row.planDeliveryDate" type="date" placeholder="选择日期" :picker-options="{
          disabledDate(time) {
              return time.getTime() + 86400000 < new Date(row.startTime) || time.getTime() > new Date(row.finishTime);
           }}">
      </el-date-picker>
      <span v-else>{{row.planDeliveryDate}}</span>
    </template>
  </avue-crud>
</template>

<script>
import { numparZReg, numParseReg, codeReg } from '@/util/zhengze';
import { init } from '@/mixins/init';

export default {
  mixins: [init],
  props: {
    projectId: {
      type: String,
    },
    productId: {
      type: String,
    },
    materialName: {
      type: String,
    },
    type: {
      type: String,
    },
    data: {
      type: Array,
    },
  },
  data() {
    return {
      option: {
        index: true,
        indexLabel: '序号',
        menuWidth: 150,
        addBtn: false,
        editBtn: false,
        addRowBtn: false,
        menu: false,
        header: false,
        column: [
          {
            label: '客户名称',
            prop: 'customerName',
            overHidden: true,
          },
          {
            label: 'PO订单号',
            prop: 'jobOrder',
            overHidden: true,
          },
          {
            label: '订购数量',
            prop: 'num',
            overHidden: true,
          },
          {
            label: '要求到货日期',
            prop: 'planDeliveryDate',
            slot: true,
            type: 'date',
            valueFormat: 'yyyy-MM-dd',
            width: 150,
            rules: [
              {
                required: true,
                message: '请选择要求到货日期',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '实际到货日期',
            prop: 'actualDeliveryDate',
            type: 'date',
            cell: true,
            valueFormat: 'yyyy-MM-dd',
            width: 150,
            // rules: [
            //   {
            //     required: true,
            //     message: '请选择实际到货日期',
            //     trigger: 'blur',
            //   },
            // ],
          },
          {
            label: '包装规范',
            prop: 'packagingRules',
            cell: true,
            overHidden: true,
            span: 24,
            minWidth: 150,
            maxlength: 20,
            rules: [
              {
                required: true,
                message: '请输入包装规范',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '运输要求',
            prop: 'shipClaim',
            cell: true,
            overHidden: true,
            span: 24,
            minWidth: 150,
            maxlength: 20,
            rules: [
              {
                required: true,
                message: '请输入运输要求',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '标识码要求',
            prop: 'markClaim',
            cell: true,
            overHidden: true,
            span: 24,
            minWidth: 150,
            maxlength: 20,
            rules: [
              {
                required: true,
                message: '请输入标识码要求',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '质量检验',
            prop: 'qualityTest',
            cell: true,
            overHidden: true,
            span: 24,
            minWidth: 150,
            maxlength: 20,
            rules: [
              {
                required: true,
                message: '请输入质量检验',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    rowSave(row, done, loading) {
      if (!numParseReg.test(row.procedureNum)) {
        this.$message.error('人数（单班）请输入大于0的整数');
        loading();
        return;
      }
      if (!numParseReg.test(row.planClasses)) {
        this.$message.error('计划班次请输入大于0的整数');
        loading();
        return;
      }
      this.data.push(row);
      done();
    },
    addUpdate(row, index, done, loading) {
      if (!numParseReg.test(row.procedureNum)) {
        this.$message.error('人数（单班）请输入大于0的整数');
        loading();
        return;
      }
      if (!numParseReg.test(row.planClasses)) {
        this.$message.error('计划班次请输入大于0的整数');
        loading();
        return;
      }
      this.data.splice(index, 1, row);
      done();
    },
    rowDel(row, index) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.data.splice(index, 1);
      });
    },
  },
};
</script>

<style lang="scss">
</style>
